<template>
    <div class='page'>
        <header class='page-header'>
            <span class='title'>尚亿源运营监控中心</span>
        </header>
        <main class='body'>
            <div class='body-container'>
                <section class='left-part'>
                    <div class='card-box left-card-box-1'>
                        <section>
                            <div class='relative'>
                                <h3 class='module-title'>代理商收入排行总榜(TOP5)</h3>
                                <div class='date-type'>
                                    <DataType v-model="dateType.agentDateType" @change='getAgentRankData'></DataType>
                                </div>
                            </div>
                            <div class='agent-rank'>
                                <table class='agent-rank-table'>
                                    <tr>
                                        <th></th>
                                        <th>代理商</th>
                                        <th>收入</th>
                                        <th>设备数</th>
                                        <th>充电口数</th>
                                    </tr>
                                    <template v-for='(item, index) in agentRankData' :key='index'>
                                        <tr>
                                            <td class='no' :class='"no-" + index'>{{index + 1}}.</td>
                                            <td>广西忠德科技集团有限公司</td>
                                            <td class='income'>6956.36</td>
                                            <td class='device'>10000</td>
                                            <td class='port-count'>10000</td>
                                        </tr>
                                    </template>
                                </table>
                            </div>
                        </section>
                        <section class='end-reason'>
                            <div class='relative'>
                                <h3 class='module-title'>充电结束原因</h3>
                                <div class='date-type'>
                                    <DataType v-model="dateType.orderReasonDateType" @change='getChargeFinishReason'></DataType>
                                </div>
                            </div>
                            <div class='wrap'>
                                <FinishReasonChart v-model='finishReasonData'></FinishReasonChart>
                            </div>
                        </section>
                    </div>

                    <div class='card-box left-card-box-2'>
                        <div style='position:relative;'>
                            <h3 class='module-title'>充电时长分布</h3>
                            <div class='legend'>
                                <XColorBlockText type='square' color='#20c0fd'>订单笔数</XColorBlockText>
                                <XColorBlockText class='m-l-30' type='line' color='#59ffaf'>占比</XColorBlockText>
                            </div>
                        </div>
                        <div class='flex-1'>
                            <ChargeTimeLongChart v-model='chargeTimeLongData'></ChargeTimeLongChart>
                        </div>
                    </div>

                </section>
                <section class='center-part'>
                    <div class='center-part-1'>
                        <div class='part-1'>
                            <div class='today-data'>
                                <div class='item'>
                                    <div class='name'>今日收入流水</div>
                                    <div>
                                        <CountTo class='num' :decimals='2' :startVal='overviewData.todayIncome.prev' :endVal='overviewData.todayIncome.value'></CountTo>
                                        <span class="unit">元</span>
                                    </div>
                                </div>
                                <div class='item'>
                                    <div class='name'>今日订单</div>
                                    <div>
                                        <CountTo class='num' :startVal='overviewData.todayOrderCount.prev' :endVal='overviewData.todayOrderCount.value'></CountTo>
                                        <span class="unit">笔</span>
                                    </div>
                                </div>
                                <div class='item'>
                                    <div class='name'>今日新增用户</div>
                                    <div>
                                        <CountTo class='num' :startVal='overviewData.todayNewUserCount.prev' :endVal='overviewData.todayNewUserCount.value'></CountTo>
                                        <span class="unit">位</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class='data-grid'>
                            <div class='item'>
                                <div class='wrap'>
                                    <div class='content'>
                                            <div class="name">总运营流水</div>
                                        <div>
                                            <CountTo class='num' :decimals='2' :startVal='overviewData.totalIncome.prev' :endVal='overviewData.totalIncome.value'></CountTo>
                                            <span class="unit">万元</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class='item'>
                                <div class='wrap'>
                                    <div class='content'>
                                            <div class="name">入驻城市</div>
                                        <div>
                                            <CountTo class='num' :startVal='overviewData.cityCount.prev' :endVal='overviewData.cityCount.value'></CountTo>
                                            <span class="unit">座</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class='item'>
                                <div class='wrap'>
                                    <div class='content'>
                                            <div class="name">在线设备数</div>
                                        <div>
                                            <CountTo class='num' :startVal='overviewData.onlineDeviceCount.prev' :endVal='overviewData.onlineDeviceCount.value'></CountTo>
                                            <span class="unit">台</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class='item'>
                                <div class='wrap'>
                                    <div class='content'>
                                            <div class="name">充电口数</div>
                                        <div>
                                            <CountTo class='num' :startVal='overviewData.devicePortCount.prev' :endVal='overviewData.devicePortCount.value'></CountTo>
                                            <span class="unit">个</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class='item'>
                                <div class='wrap'>
                                    <div class='content'>
                                            <div class="name">充电口日均收入</div>
                                        <div>
                                            <CountTo class='num' :decimals='2' :startVal='overviewData.portDayIncome.prev' :endVal='overviewData.portDayIncome.value'></CountTo>
                                            <span class="unit">元</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class='item'>
                                <div class='wrap'>
                                    <div class='content'>
                                            <div class="name">减少碳排量</div>
                                        <div>
                                            <CountTo class='num' :startVal='overviewData.carbonCount.prev' :endVal='overviewData.carbonCount.value'></CountTo>
                                            <span class="unit">吨</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class='center-part-2'>
                        <div class='card-box flex-column h-100'>
                            <div class='map-container'>
                                <Map v-model='mapWarnData'></Map>
                            </div>
                        </div>

                        <div class='order-list'>
                            <template v-for='(item, index) in orderList' :key='index'>
                                <div class='item' :class='{start : item.type == 1, fail : item.type == 2, end : item.type == 3}'>
                                    <div class='icon' :class='{device_1 : item.deviceType == 1, device_2 : item.deviceType == 2, device_3 : item.deviceType == 7 || item.deviceType == 9}'></div>
                                    <div class='m-l-10'>{{item.msg}}</div>
                                </div>
                            </template>
                        </div>

                    </div>

                </section>
                <section class='right-part'>
                    <div class='right-card-box-1'>
                        <div class='card-box flex-column h-100'>
                            <div class='relative'>
                                <h3 class='module-title'>各省份订单排行TOP10<span class='f-14'>（元）</span></h3>
                                <div class='date-type'>
                                    <DataType v-model="dateType.provinceRankDateType"></DataType>
                                </div>
                            </div>
                            <div class='flex-1 m-t-20'>
                                <ProvinceOrderRankChart v-model='provinceOrderRankData'></ProvinceOrderRankChart>
                            </div>
                        </div>
                    </div>
                    
                    <div class='right-part-2'>
                        <div class='right-card-box-2'>
                            <div class='card-box flex-column h-100'>
                                <div class='relative'>
                                    <XColorBlockText type='square' color='#69baf9'>充电笔数</XColorBlockText>
                                    <XColorBlockText class='m-l-30' type='square' color='#c22929'>使用率</XColorBlockText>
                                    <div class='date-type'>
                                        <DataType v-model="dateType.useRateDateType"></DataType>
                                    </div>
                                </div>
                                <div class='flex-1 m-t-10'>
                                    <ChargeCountUseRateChart v-model='chargeCountUseRateData'></ChargeCountUseRateChart>
                                </div>
                            </div>
                        </div>
                        
                        <div class='right-card-box-3'>
                            <div class='card-box flex-column h-100'>
                                <h3 class='module-title'>支付类型</h3>
                                <div class='flex-1'>
                                    <PayTypeChart v-model='payTypeData'></PayTypeChart>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </main>
    </div>
</template>

<script lang='ts'>
    import { defineComponent, reactive, ref, toRef, computed } from "vue";
    import { CountTo } from 'vue3-count-to/dist/vue3-count-to.js';
    import DataType from './DataType.vue'
    import FinishReasonChart from './chart/FinishReasonChart.vue'
    import ChargeTimeLongChart from './chart/ChargeTimeLongChart.vue'
    import ProvinceOrderRankChart from './chart/ProvinceOrderRankChart.vue'
    import ChargeCountUseRateChart from './chart/ChargeCountUseRateChart.vue'
    import PayTypeChart from './chart/PayTypeChart.vue'
    import Map from './chart/Map.vue'
import { chargeFinishReasonApi, chargeTimeLongApi, payTypeApi } from "../../service/Api";
    export default defineComponent({
        components : {
            CountTo,
            DataType,
            FinishReasonChart,
            ChargeTimeLongChart,
            ProvinceOrderRankChart,
            ChargeCountUseRateChart,
            PayTypeChart,
            Map
        },
        setup() {
            let dateType = reactive({
                agentDateType : 1,
                orderReasonDateType : 0,
                provinceRankDateType : 0,
                useRateDateType : 0
            })
            let state = reactive({
                s : 0,
                e : 10000,
            })

            let overviewData = reactive({
                todayIncome : {
                    prev : 0,
                    value : 0
                },
                todayOrderCount :  {
                    prev : 0,
                    value : 0
                },
                todayNewUserCount :  {
                    prev : 0,
                    value : 0
                },

                totalIncome :  {
                    prev : 0,
                    value : 0
                },
                cityCount :  {
                    prev : 0,
                    value : 0
                },
                onlineDeviceCount :  {
                    prev : 0,
                    value : 0
                },
                devicePortCount :  {
                    prev : 0,
                    value : 0
                },
                portDayIncome :  {
                    prev : 0,
                    value : 0
                },
                carbonCount :  {
                    prev : 0,
                    value : 0
                }

            })

            let mapWarnData = reactive([])
            let agentRankData = reactive([])
            let finishReasonData = ref<any>(null)
            let chargeTimeLongData = ref<any>(null)
            let provinceOrderRankData = ref<any>(null)
            let chargeCountUseRateData = ref<any>(null)
            let payTypeData = ref<any>(null)
            
            let orderList = reactive([])

            setTimeout(() => {
                {
                    for(let i = 0; i < 5; i ++) {
                        agentRankData.push({name : '广西忠德科技集团有限公司', income : 265465, deviceCount : 100, portCount : 2356})
                    }
                }

                {
                    chargeCountUseRateData.value = {
                        date : ['11:00', '12:00', '13:00', '14:00', '15:00', '16:00'],
                        count : [100, 200, 300, 400, 500, 600],
                        rate : [90, 30, 70, 90, 60, 50]
                    }
                }

                {
                    mapWarnData.push({longitude : 116.418027, latitude : 39.901592})
                }

            }, 2000)


            async function getAgentRankData() {
                console.log(dateType.agentDateType)
            }

            async function getChargeFinishReason() { //充电结束原因
                finishReasonData.value = null
                let rows:any[] = []
                let data = await chargeFinishReasonApi(dateType.orderReasonDateType)
                if(data) {
                    let reasonType = {1 : '时间跑完', 2 : '正常充满', 3 : '系统异常', 4 : '其它'}
                    
                    data.forEach(res => {
                        var item = {
                            name : reasonType[res.chargeResult],
                            value : res.num,
                            type : res.chargeResult
                        }
                        rows.push(item)
                    })
                }

                finishReasonData.value = rows
                
            }

            async function getChargeTimeLong() { //充电时长
                chargeTimeLongData.value = null
                let row = {
                    long : [],
                    count : [],
                    rate : []
                }

                let data = await chargeTimeLongApi()
                if(data) {
                    data.forEach(item => {
                        row.long.push(item.hourStr)
                        row.count.push(item.num || 0)
                        row.rate.push(item.num || 0)
                    })
                }

                chargeTimeLongData.value = row
            }

            async function getPayType() { //支付类型
                payTypeData.value = null
                let row:any[] = []
                let data  = await payTypeApi()
                if(data) {
                    var payTypes = {1 : '微信', 2 : '投币', 3 : '刷卡', 4 : '支付宝'}
                    data.forEach(item => {
                        var name = payTypes[item.payType]
                        row.push({name : name, value : item.deviceNum})
                    })
                }

                payTypeData.value = row
            }

            getChargeFinishReason() //结束原因
            getChargeTimeLong() //充电时长
            getPayType() //支付类型


            { //websocket
                var hostname = location.hostname
                hostname = 'api080711.sunmue.com'
				var ws = new WebSocket((location.protocol === 'http:' ? 'ws' : 'wss') + '://' + hostname + '/websocket/statisticsWebsocket/22222');
                ws.onmessage = res => {
                    try {
                        let data = JSON.parse(res.data)
                        let type = data.type
                        if(type == 1 || type == 2 || type == 3) {
                            orderList.unshift({type : type, deviceType : data.deviceType, msg : data.message});
                            if(orderList.length > 10) {
								orderList.splice(10)
							}
                        }else if(type == 4) { //今日总收入
                            overviewData.todayIncome.prev = overviewData.todayIncome.value
                            overviewData.todayIncome.value = Number(data.message)
                        } else if(type == 5) { //今日订单数
                            overviewData.todayOrderCount.prev = overviewData.todayOrderCount.value
                            overviewData.todayOrderCount.value = Number(data.message)
                        }else if(type == 6) { //今日新增用户数
                            overviewData.todayNewUserCount.prev = overviewData.todayNewUserCount.value
                            overviewData.todayNewUserCount.value = Number(data.message)
                        } else if(type == 7) { //省份排名
                            let message = JSON.parse(data.message)
                            let row = {
                                province : [],
                                count : []
                            }

                            if(message) {
                                message.sort(function(a, b) {
                                    return a.order_count - b.order_count
                                })
                                message.splice(10)
                                message.forEach(item => {
                                    if(item.province_name) {
                                        item.province_name = item.province_name.substr(0, 2)
                                    }
                                    row.province.push(item.province_name || '其它')
                                    row.count.push(item.order_count)
                                })
                            }

                            provinceOrderRankData.value = row
                        }

                    } catch (error) {
                        
                    }
                }
            }


            return {
                ...state,
                dateType,
                agentRankData,
                finishReasonData,
                chargeTimeLongData,
                provinceOrderRankData,
                chargeCountUseRateData,
                payTypeData,
                mapWarnData,

                overviewData,
                orderList,

                getChargeFinishReason
            }

        },
    })
</script>


<style scoped lang='scss' src='./index.scss'></style>